<template>
	<el-dialog :title="title" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1000px">
		<div class="form-box">
			<el-form ref="form" :model="form" :rules="rules" label-width="90px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="直播标题" prop="liveName">
							<el-input v-model="form.liveName" placeholder="请填写直播标题" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="直播时间" prop="startTime">
							<el-date-picker
								v-model="liveTime"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								@change="chooseTime"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="直播频道" prop="channelId">
							<el-select v-model="form.channelId" @change="chooseChannel" placeholder="请选择直播频道" style="width: 100%;">
								<el-option :value="item.id" :label="item.channelName" v-for="item of channelList" :key="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="本场直播领券数量上限" label-width="170px">
							<el-input v-model="form.couponQuantityPerUser" placeholder="请填写会员领券的数量上限" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="领券达上限提示语" :prop="form.couponQuantityPerUser ? 'couponLimitMsg' : ''" label-width="140px">
							<el-input v-model="form.couponLimitMsg" placeholder="请填写领券达上限后的提示语" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row v-if="isEdit">
					<el-col :span="24">
						<el-form-item label="直播状态" prop="status">
							<el-radio-group v-model="form.status">
								<el-radio :label="1">上架</el-radio>
								<el-radio :label="0">下架</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		
		<div slot="footer">
			<el-button type="primary" @click="submit">保 存</el-button>
			<el-button @click="reset" v-if="!isEdit">重 置</el-button>
			<el-button @click="close">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { getChannelList, addLive, editLive } from '@api/live/live'
	export default {
		props: {
			isShow: Boolean,
			id: Number,
			item: Object,
			isEdit: Boolean,
		},
		data() {
			return {
				form: {
					liveName: '',
					startTime: '',
					endTime: '',
					channelId: '',
					channelCode: '',
					channelInfo: '',
					couponQuantityPerUser: '',
					couponLimitMsg: '本场直播领券已达上限',
					status: ''
				},
				rules: {
					liveName: [{ required: true, message: '请填写直播标题', trigger: 'blur' }],
					startTime: [{ required: true, message: '请选择直播时间', trigger: 'blur' }],
					channelId: [{ required: true, message: '请选择直播频道', trigger: 'blur' }],
					status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
					couponLimitMsg: [{ required: true, message: '请填写提示语', trigger: 'blur' }],
				},
				liveTime: [],
				
				channelList: [],
			}
		},
		computed: {
			title() {
				let title = '直播';
				if(this.isEdit) {
					title = '编辑' + title;
				} else {
					title = '添加' + title;
				}
				return title;
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					if(this.isEdit) {
						this.initForm();
					}
					this.getChannel();
				}
			},
			'form.channelId': {
				handler(val) {
					if(val) {
						this.$refs['form'].clearValidate('channelId');
					}
				},
				deep: true
			},
		},
		methods: {
			initForm() {
				this.form.liveName = this.item.liveName;
				this.form.startTime = this.item.startTime;
				this.form.endTime = this.item.endTime;
				this.form.channelId = this.item.channelId;
				this.form.channelCode = this.item.channelCode;
				this.form.couponQuantityPerUser = this.item.couponQuantityPerUser ? this.item.couponQuantityPerUser : '';
				this.form.couponLimitMsg = this.item.couponLimitMsg ? this.item.couponLimitMsg : '本场直播领券已达上限';
				this.form.status = this.item.status;
				
				this.liveTime = [this.item.startTime, this.item.endTime];
			},
			
			getChannel() { //获取直播频道
				getChannelList({
					status: 1,
					pageNum: 1,
					pageSize: 100,
				})
					.then(res => {
						this.channelList = res.data.content;
					})
			},
			
			chooseChannel(val) { //选择直播频道
				this.channelList.forEach(item => {
					if(item.id == val) {
						this.form.channelCode = item.channelCode;
					}
				})
			},
			chooseTime(val) { //选择时间
				this.form.startTime = val[0];
				this.form.endTime = val[1];
			},
			submit() { //提交添加or编辑
				this.$refs.form.validate(valid => {
					if (valid) {
						let params = {
							liveName: this.form.liveName,
							startTime: this.form.startTime,
							endTime: this.form.endTime,
							channelId: this.form.channelId,
							channelCode: this.form.channelCode,
							couponQuantityPerUser: this.form.couponQuantityPerUser,
							couponLimitMsg: this.form.couponLimitMsg,
						}
						if(this.isEdit) {
							params.id = this.id;
							params.status = this.form.status;
							
							editLive(params)
								.then(() => {
									this.$message.success('直播信息修改成功！');
									this.close();
									
									this.$emit('submit');
								})
						} else {
							addLive(params)
								.then(() => {
									this.$message.success('直播信息添加成功！');
									this.close();
									
									this.$emit('submit');
								})
						}
					}
				})
			},
			reset() {
				this.$refs.form.resetFields();
				
				this.form.liveName = '';
				this.form.startTime = '';
				this.form.endTime = '';
				this.form.channelId = '';
				this.form.channelCode = '';
				this.form.channelInfo = '';
				this.form.couponQuantityPerUser = '';
				this.form.couponLimitMsg = '本场直播领券已达上限';
				this.form.status = '';
				this.liveTime = [];
			},
			
			close() {
				this.$emit('close');
				this.reset();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 0 12px 0 0;
	}
</style>